const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const pages = ["firstPage","examinationProcess","examResult","inTheExam","tikuList","login","register","examAnalysis","addQuestions"];

// 动态生成HTML插件配置
function listPagePlugin() {
    return pages.map(item => {
        return new HtmlWebpackPlugin({
            template: `./src/${item}.html`, //代表默认要打包的文件路径
            filename: `${item}.html`, //要打包的文件名字
            chunks: [item] //对应的这个html文件默认引入对应同名js文件
        })
    });
}

// 动态生成entry配置
function listEntry() {
    let items = {}
    pages.forEach(item => {
        items[item] = `./src/js/${item}.js`
    })
    return items
}
module.exports = {
    mode: "production",
    entry: {
        ...listEntry()
        // index: "./src/js/index.js",
        // login: "./src/js/login.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js"
    },
    module: {
        rules: [{
                test: /\.css$/i, //寻找以.css结尾的文件
                // exclude:/node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.scss$/i, //寻找以.css结尾的文件
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|webp)$/i, //寻找以.css结尾的文件
                exclude: /node_modules/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 1024 * 10, //图片小于10kb的时候。默认将图片转化为base64位编码
                        outputPath: "./dximages/",
                        esModule: false //图片这个插件和其他会出现冲突。设置位false可以避免冲突
                    }
                }
            },
            // 打包html文件中的img
            {
                test: /.(html|htm)$/i,
                use: ["html-withimg-loader"]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            "$": "jquery"
        }),
        ...listPagePlugin(),
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })

    ],
    devServer: {
        port: 8001,
        open: ['login.html'],
        hot: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:3000',
                pathRewrite: {
                    '^/api': ''
                },
            }
        }
    },
    // openPage:"login.html"

    resolve: {
        alias: {
            "@css": path.resolve(__dirname, "./src/css"),
            "@scss": path.resolve(__dirname, "./src/scss"),
            "@js": path.resolve(__dirname, "./src/js")
        }
    },
    performance: {
        hints:'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 js 文件的性能提示
        assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js');
        }
      }
}